<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" language="javascript" src="../js/jquery.js"></script>
<style>
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input{
	margin: 0;
	padding: 0;
}

body {
	font-size: 12px;
	color: #555;
}

#header {
	margin: 50px 0;
	line-height: 30px;
	text-align: center;
	border-bottom: 1px dashed #ddd;
}
/* #notice_wrap */
#notice_wrap {
	position: relative;
	width: 700px;
	height: 50px;
	margin: 0 auto;
	border: 1px solid #ddd;
}
/* #notice */
#notice {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 50px;
}

#notice ul {
	position: absolute;
	width: 1000px;
}

#notice ul li {
	overflow: hidden;
	list-style: none;
	float: left;
	width: 470px;
	height: 50px;
	line-height: 50px;
	margin-left: 15px;
	padding-right: 14px;
	border-right: 1px solid #ddd;
	border-color: rgb(221,221,221);
}

#prev,#next {
	display: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	width: 15px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #777;
}

#prev {
	left: 0;
}

#next {
	right: 0;
}
/* #search */
#search {
	overflow: hidden;
	position: absolute;
	top: 12px;
	right: 15px;
	width: 170px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#footer {
	margin: 50px 0;
	padding: 10px 0;
	text-align: center;
	border-top: 1px dashed #ddd;
}
</style>

<script type="text/javascript">
	jQuery(document).ready(function(){
		var $notice=$('#notice'), //选择器赋值
			$prev=$('#prev'),
			$next=$('#next'),
			$search=$('#search'),
			myScroll=setInterval(notice,2000); //每4秒循环
		$next.click(function(){ //点击向右翻
			var $first=$notice.find('li:first');
			$first.remove();
			$notice.find('li:last').after($first);
		});
		$prev.click(function(){ //点击向左翻
			var $last=$notice.find('li:last');
			$last.remove();
			$notice.find('li:first').before($last);
		});
		$notice.hover(function(){ //鼠标hover时停止动画 + 显示翻页按钮
			clearInterval(myScroll);
			$prev.show();
			$next.show();
		},function(){ //鼠标移走时启动动画+隐藏翻页按钮
			myScroll=setInterval(notice,2000);
			$prev.hide();
			$next.hide();
		});
		function notice(){ //老汉推车效果函数
			var first=$notice.find('li:first'), width=-(first.outerWidth(true))+'px';
			$search.animate({right:'28px'},{ //注意这个14px值，通常是搜索框中right值+搜索框距离左边撞击线的距离（看css）
				duration:400,complete:function(){
					$search.animate({right:'14px'},400); //14px为搜索框原来的right值（看css）
					$notice.find('li').css({"border-color":"#999"});
					$notice.children('ul').animate({left:width},{
						duration:1200,complete:function(){
							$notice.children('ul').append(first).css("left","0");
							$notice.find('li').css({"border-color":"#ddd"});
						}
					});
				}
			});
		};
	});
</script>

</head>
<body>
	<div id="header">
		<h3>“老汉推车”走马灯效果演示</h3>
	</div>
	<div id="notice_wrap">
		<div id="notice">
			<ul style="left: 0px;">
				<li>最新“噗～”：“拉灯”死了，我再也不相信爱情鸟～</li>
				<li>这里展示的是：“老汉推车”走马灯效果</li>
				<li>名字不错吧</li>
				<li><img src="../images/0.jpg" /></li>
			</ul>
			<p id="prev" style="display: none;">«</p>
			<p id="next" style="display: none;">»</p>
		</div>
		<div id="search" style="right: 14px;">
			我是搜索框，霍霍
		</div>
	</div>
</body>
</html>